import React from 'react';
import {Button} from 'antd';
import { WeaDialog, WeaTransfer, WeaInputSearch } from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import './style.css';

// 流程中心，数据来源，排序字段
class EField_New extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);

        this.state = {
            visible: true, 
            eFieldNewDataSource: props.eFieldNewDataSource || [],
            eFieldNewUsedKeys: props.eFieldNewUsedKeys || [],
            leftSearchName: '',
            rightSearchName: ''
        };
    }

    render() {
        const {visible, eFieldNewDataSource, eFieldNewUsedKeys, searchName} = this.state;
        
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@46lase`}
                visible={visible}
                title={getLabel(32317, '显示字段设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 792, height: 490}}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@v6d1gc`}
                    className="portal-element-showfieldnew"
                    data={eFieldNewDataSource}
                    selectedKeys={eFieldNewUsedKeys}
                    onChange={(keys) => this.setState({eFieldNewUsedKeys: keys})}
                    leftHeader={<div style={{display: 'inline-block', position: 'relative'}}><span style={{paddingLeft: '15px', position: 'absolute',
                        width: '100px', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', top: '-25px'}}>{getLabel(83302, '待选')}</span><div style={{position: 'absolute',
                        top: '-25px',  width: '90px', left: '238px'}}><WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@yl6l6a`} onSearch={(value)=>this.setState({leftSearchName: value})}/></div></div>}
                    rightHeader={<div style={{display: 'inline-block', position: 'relative'}}><span style={{paddingLeft: '15px', position: 'absolute',
                        width: '100px', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', top: '-25px'}}>{getLabel(83303, '已选')}</span><div style={{position: 'absolute',
                        top: '-25px',  width: '90px', left: '238px'}}><WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@5ehrb5`} onSearch={(value)=>this.setState({rightSearchName: value})}/></div></div>}
                    filterLeft={this.filterLeft.bind(this, eFieldNewDataSource)}
                    filterRight={this.filterRight.bind(this, eFieldNewUsedKeys)}
                />
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hze0lk`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@uel6ah`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        this.props.onOk(this.state);
    }

    onCancel() {
        this.props.onCancel();
    }

    filterLeft(items){
        const { leftSearchName } = this.state;
        if (leftSearchName) {
            items = items.filter((item)=>item.name.indexOf(leftSearchName.trim()) != -1);
        }
        return items;
    }
    
    filterRight(items){
        const { rightSearchName, eFieldNewDataSource } = this.state;
        let itemss = [];
        for(let i = 0; i< items.length; i++){
            for(let j = 0; j < eFieldNewDataSource.length; j++){
                if(items[i] == eFieldNewDataSource[j].key){
                    itemss.push(eFieldNewDataSource[j]);
                    continue;
                }
            }
        }
        if (rightSearchName) {
            itemss = itemss.filter((item)=>item.name.indexOf(rightSearchName.trim()) != -1);
        }
        return itemss;
    }
}

export default EField_New;
